<template type="html">
    <div class="downloadList">
        <scroll ref="scroll">
            <downloadListItem v-for="item in data"
                              :key="item.id"
                              :id="item.id"
                              :type="item.type"
                              :filesize="item.filesize"
                              :percentage="item.percentage"
                              :filepath="item.filepath"
                              :fileicon="item.fileicon"
                              :filename="item.filename">
            </downloadListItem>

            <template v-if="data.length === 0">
                <span class="downloadList-no">暂无下载</span>
            </template>
        </scroll>
    </div>
</template>

<script>
    import scroll from "@/components/base/pcScroll.vue";
    import downloadListItem from "./item.vue";
    export default {
        props:{
          data:{
              type:Array,
              required:true
          }
        },
        name: "downloadList",
        components:{
            downloadListItem,
            scroll
        },
        computed:{

        },
        mounted(){
            console.log(this.data)
        },
        watch:{
            data:function () {
                this.$refs['scroll'].update();
            }
        }
    }
</script>

<style lang="less" scoped>
    .downloadList{
        width: 100%;
        height: 440px;
        border-top: 1px solid #ccc;
        position: relative;
        overflow: hidden;
        &-no{
            display: inline-block;
            width: 100%;
            padding: 25px 0;
            text-align: center;
            color: #333;
        }
    }
</style>
